<template>
	<div class="foot">
		<div class="cont">
			<div class="let">
				<h2>俱乐部</h2>
				<ul>
					<li v-for="(item, index) in club" :key="index">
						<el-link href="##" target="_blank" icon="el-icon-arrow-right">{{ item.exp }}</el-link>
					</li>
				</ul>
			</div>
			<div class="mid">
				<h2>营业时间</h2>
				<ul>
					<li v-for="(item, index) in time" :key="index">
						{{ item.title }}
						{{ item.exp }}
					</li>
				</ul>
			</div>
			<div class="right">
				<h2>联系我们</h2>
				<ul>
					<li v-for="(item, index) in callme" :key="index">
						<i :class="item.icon"></i>{{ item.exp }}
					</li>
				</ul>
			</div>
		</div>
		<p>版权所有：xxx高等研究所</p>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				club: [
					{
						id: 1,
						exp: '俱乐部简介'
					},
					{
						id: 2,
						exp: '申请流程'
					},
					{
						id: 3,
						exp: '活动资讯'
					},
					{
						id: 4,
						exp: '联系我们'
					}
				],
				time: [
					{
						title: '周一至周五',
						exp: '9:00 am - 18:00 pm'
					},
					{
						title: '周六',
						exp: '9:00 am - 18:00 pm'
					},
					{
						title: '周日',
						exp: '节假日不休息'
					}
				],
				callme: [
					{
						id: 100,
						exp: '400xxx888',
						icon: 'el-icon-phone'
					},
					{
						id: 101,
						exp: '传真:010xxx00',
						icon: 'el-icon-s-platform'
					},
					{
						id: 102,
						exp: '北京王府井大街',
						icon: 'el-icon-location'
					}
				]
			}
		},
		methods: {
			
		},
	}
</script>

<style lang="scss" scoped>
	.foot {
		width: 100%;
		background: #303133;
		padding: 2% 0;
		.cont {
			width: 70%;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			color: #eee;
			ul {
				list-style: none;
				li {
					padding: 5% 0;
					.el-link {
						color: #eee;
					}
				}
			}
		}
		p {
			font-size: 14px;
			color: #fff;
			margin-top: 1%;
			text-align: center;
		}
	}
</style>
